<template>
  <span class="home-button__wrapper">
    <span class="button-gradient"></span>
    <span class="home-button" @click="onClick">
      <slot></slot>
    </span>
  </span>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
  emits: ['click'],
  setup (props, { emit }) {
    const onClick = () => {
      emit('click')
    }
    return {
      onClick
    }
  }
})
</script>
<style lang="less">
@borderRadius: 8px;
.home-button__wrapper{
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  padding: 2px;
  border-radius: @borderRadius;
  overflow: hidden;
  &:hover{
    .button-gradient{
      animation: 8s anim linear infinite;
    }
  }

  .button-gradient{
    width: 200%;
    height: 100%;
    position: absolute;
    background: red;
    overflow: hidden;
    left:0;
    top:0;
    border-radius: @borderRadius;
    background: repeating-linear-gradient(
      150deg,
      hsla(0, 0%, 100%),
      hsla(0, 0%, 100%) 2px,
      transparent 0,
      transparent 4px
    );

  }
  .home-button{
    position: relative;
    border-radius: @borderRadius;
    display: inline-block;
    box-sizing: border-box;
    background: rgb(122,120,236);
    cursor: pointer;
    padding:4px 8px;
    font-weight: bold;
    font-size: 28px;
    letter-spacing: 0.1em;
    color: #fff;
  }
}
@keyframes anim {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>
